<template>
	<view class="contetn">
		<f-navbar title="申请提现" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_topbg">
				<view class="content_title">
					可提现金额
				</view>
				<view class="contnet_price">
					￥{{dataobj.balance_amount}}
				</view>
				<view class="content_time">
					下次可提现时间:{{dataobj.extract_txt}}
				</view>
			</view>
			<view class="tixian_box">
				<view class="tixian_title">
					申请提现
				</view>
				<view class="tixian_input">
					<input class="price_input" @input="onprice" maxlength="10" placeholder-class="placeclass"
						placeholder="输入您要提现的金额" type="number" :value="pricevalue">
				</view>
				<view class="tixian_submit" @click="onsubmit">
					提交申请
				</view>
			</view>
			<view class="tixianrecords">
				<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true"
					class="scrollHeight" :style="{marginTop:0+'rpx'}" refresher-enabled="true" :scroll-top="scrollTop"
					:refresher-threshold="100" :refresher-triggered="triggered" :scroll-with-animation="true">
					<view class="tixianrecords_title">
						提现记录
					</view>
					<view class="tixianrecords_th">
						<view class="tixianrecords_time">
							申请时间
						</view>
						<view class="tixianrecords_price">
							金额/元
						</view>
						<view class="tixianrecords_status">
							申请状态
						</view>
					</view>

					<view class="tixianrecords_td" v-for="(item,index) in dataList" :key="index">
						<view class="tixianrecords_time1">
							{{item.create_at}}
						</view>
						<view class="tixianrecords_price1">
							{{item.amount}}
						</view>
						<view class="tixianrecords_status0" v-if="item.status==0">
							未处理
						</view>
						<view class="tixianrecords_status0" v-else-if="item.status==1">
							处理中
						</view>
						<view class="tixianrecords_status1" v-else-if="item.status==2">
							已打款
						</view>
						<view class="tixianrecords_status2" v-else-if="item.status==3">
							提现失败
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		
		<!-- 是否下架 -->
		<van-popup :show="ishuodong" z-index="100" custom-style="border-radius: 10rpx;" round>
			<view class="isxiajiabox">
				<view class="isxiajiaboxtitle">
					是否去设置银行卡
				</view>
				<view class="isxiajiaboxbottom">
					<view class="isxiajiaboxline">
						
					</view>
					<view class="isxiajiaboxbtnbox">
						<view class="isxiajiaboxbtnboxL" @click="cancelhuodong">
							取消
						</view>
						<view class="isxiajiaboxbtnboxR" @click="comfirmhuodong">
							确认
						</view>
					</view>
				</view>
			</view>
		</van-popup>
		
		
		
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getExtractRecord,
		applyExtractAmount
	} from '../../../utils/app.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				pricevalue: '',
				imgurl: getApp().globalData.imgurl,
				pages: 1, // 分页数据
				PageSize: 4, // 一页有多少数据
				total: null, // 总条数	
				dataList: [], // 列表数据
				triggered: false, // 设置是否下拉
				scrollTop: 0,
				dataobj: {},
				ishuodong: false, // 是否显示活动弹窗

			}
		},
		onLoad() {
			this.getList(true)
		},

		methods: {
			
			
			// 取消活动弹窗
			cancelhuodong(){
				this.ishuodong = false
			},
			// 确认活动弹窗
			comfirmhuodong(){
				this.ishuodong = false
				uni.navigateTo({
					url:'/pages/subPack/BankCard/BankCard'
				})
			},
			
			
			// 提交申请
			onsubmit() {
				if(this.dataobj.is_bank==1){
					applyExtractAmount({
						amount: this.pricevalue
					}).then(res => {
						console.log(res);
						this.pricevalue = ''
						if(res.code==1){
							uni.showToast({
								icon:'success',
								title:res.info,
								duration:1000
							})
							this.getList(true)
						} else{
							uni.showToast({
								icon:'none',
								title:res.info,
								duration:1000
							})
						}
					
					})
				}else {
					this.ishuodong = true
				}

			},
			// 输入的金额
			onprice(e) {
				console.log(e);
				this.pricevalue = e.detail.value
			},
			//触底加载
			lowerBottom() {
				// 判断是否还有下一页数据
				// if (this.pages * this.PageSize >= this.total) return person.showMoreData = true
				// 让页码值自增 +1
				// console.log('999');
				// this.pages += 1
				// 重新获取列表数据
				this.getList(false)
			},
			// 下拉刷新
			getFresh() {
				this.triggered = true,
					this.getList(true)

			},
			// 获取数据
			getList(isPullDownRefresh) {
				let currPage = 1
				if (!isPullDownRefresh) {
					currPage = this.pages + 1
				} else {
					currPage = 1
				}
				getExtractRecord({
					page: currPage
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.dataobj = res.data.top_info
						uni.hideToast()
						const newdata = res.data.list
						if (isPullDownRefresh) {
							this.dataList = newdata
							this.triggered = false

						} else {
							this.dataList = [...this.dataList, ...newdata]
						}
						this.pages = res.data.page.current
						console.log(this.pages);
						// this.total = res.data.page.total
					} else {
						uni.showToast({
							icon:'none',
							title:res.info,
							duration:1000
						})
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/subPack/Login/Login'
							})
						},1000)
					}
				})
			},

		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	.scrollHeight {
		height: 50vh;
	}

	.content_topbg {
		width: 690rpx;
		height: 216rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/tixianbg.png) no-repeat;
		background-size: contain;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content_title {
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		padding-top: 29rpx;
	}

	.contnet_price {
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFF100;
		margin-top: 25rpx;
	}

	.content_time {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		margin-top: 25rpx;
	}

	.tixian_box {
		width: 690rpx;
		/* height: 315rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
	}

	.tixian_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* line-height: 45rpx; */
		/* padding-top: 40rpx; */
	}

	.tixian_input {
		width: 646rpx;
		height: 64rpx;
		background: #EEEEEE;
		border-radius: 32rpx;
		margin-top: 40rpx;
	}

	.tixian_submit {
		width: 646rpx;
		height: 64rpx;
		background: #EF0E6C;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.price_input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.placeclass {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.tixianrecords {
		width: 690rpx;
		/* height: 419rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.tixianrecords_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 37rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.tixianrecords_th {
		width: 650rpx;
		height: 60rpx;
		background: #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
	}

	.tixianrecords_time {
		width: 260rpx;
		/* height: 19rpx; */
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: center;
		line-height: 60rpx;
	}

	.tixianrecords_price {
		width: 118rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
	}

	.tixianrecords_status {
		width: 240rpx;
		/* height: 27rpx; */
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
	}

	.tixianrecords_td {
		width: 650rpx;
		height: 60rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
	}

	.tixianrecords_td:nth-child(2n) {
		background: #EEEEEE;
	}

	.tixianrecords_time1 {
		width: 260rpx;
		/* height: 19rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		text-align: center;
		line-height: 60rpx;
	}

	.tixianrecords_price1 {
		width: 118rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
	}

	.tixianrecords_status0 {
		width: 240rpx;
		/* height: 27rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		line-height: 60rpx;
		text-align: center;
		color: #333333;
	}

	.tixianrecords_status1 {
		width: 240rpx;
		/* height: 27rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		line-height: 60rpx;
		text-align: center;
		color: #42FF00;
	}

	.tixianrecords_status2 {
		width: 240rpx;
		/* height: 27rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		line-height: 60rpx;
		text-align: center;
		color: #FF0000;
	}
	
	/* 是否下架弹窗 */
	.isxiajiabox{
		width: 412rpx;
		min-height: 204rpx;
		background: #FFFFFF;
		border-radius: 10rpx !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.isxiajiaboxtitle{
		width: 300rpx;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		margin-top: 36rpx;
		line-height: 42rpx;
		
	}
	.isxiajiaboxbottom{
		margin-bottom: 20rpx;
	}
	.isxiajiaboxline{
		width: 412rpx;
		height: 4rpx;
		background-color: #eee;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
		/* border: 2px solid #EEEEEE; */
	}
	.isxiajiaboxbtnbox{
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	.isxiajiaboxbtnboxL{
		width: 152rpx;
		height: 52rpx;
		border: 2rpx solid #EF0E6C;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 52rpx;
		text-align: center;
		margin-right: 30rpx;
	}
	.isxiajiaboxbtnboxR{
		width: 150rpx;
		height: 50rpx;
		background: #EF0E6C;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 52rpx;
		text-align: center;
	}
</style>